<template>
<view>
	<view class="slot-content">
		<text>新密码</text>
		<u-input class="inp" v-model="newPassword" :clearable="false" :password-icon="false" :type="type" placeholder="请设置新登录密码" :border="border"  />
		<u-icon :name="iconType" class="icon" @click="changeType"></u-icon>
	</view>
	
	<view class="slot-content">
		<text>确认密码</text>
		<u-input class="inps" v-model="value" :password-icon="false" :clearable="false" :type="type" placeholder="请确认新登录密码" :border="border"  />
		<u-icon :name="iconType" class="icon" @click="changeType"></u-icon>
	</view>
	
	<view class="point">
		<text>仅支持字母、数字和标点符号，最少6位，不能使用空格</text>
	</view>
	
	<view class="btn">
		<text>确认修改</text>
  </view>
	</view>
</template>

<script>
export default {
   data() {
			return {
				newPassword: '',
				value:'',
			  type: 'text',
				border: false,
				iconType: 'eye'
			}
		},
	methods:{
		changeType(){
			if(this.type == "text"){
				this.iconType = "eye-off"
				this.type = "password"
			}else{
				this.iconType = "eye"
				this.type = "text"
			}
		}
	 }
	}
</script>

<style lang="scss" scoped>
.slot-content {
	width: 90%;
	margin: 5%;
	background-color: #fefffe;
	height: 100rpx;
	border-radius: 10rpx;
	display: flex;
	justify-content: space-around;
	position: relative;
}


.slot-content text {
	margin-left: 40rpx;
	line-height: 100rpx;
}

.slot-content .icon {
	position: absolute;
	top: 40rpx;
	right: 40rpx;
}

.slot-content .inps {
	width: 60%;
	margin-left: 20rpx;
	margin-top: 14rpx;
}

.inp {
	width: 60%;
	margin-left: 46rpx;
	margin-top: 14rpx;
}


input::-webkit-input-placeholder {
  color: #aab2bd;
  font-size: 24rpx;
  text-align: right;
}

.point {
	width: 90%;
	margin: 5%;
	font-size: 28rpx;
	color: #c6100e;
	text-align: center;
}

.btn {
	width: 90%;
	margin: 5%;
	background-color: #c6100e;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	color: #FFFFFF;
	border-radius: 40rpx;
}
</style>
